<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :height="bar.height"
    fixed-header
    checkbox-color="green"
    :items-per-page="5"
  >
    <template v-slot:top>
      <v-toolbar
        flat
        :color="bar.class"
        :dark="bar.dark"
        dense
      >
        <v-toolbar-title v-text="bar.title"></v-toolbar-title>
        <v-divider
          class="mx-4"
          inset
          vertical
        ></v-divider>
        <v-spacer></v-spacer>
        <template v-if="bar.display">
          <v-btn 
            color="primary" 
            icon
          >
            <v-icon>mdi-cloud-sync-outline</v-icon>
          </v-btn>
        </template>  

        <template>
          
          <v-btn
            color="primary"
            dark
            class="mb-2"
            @click="newItem(bar, 'AddTask')"
            icon
          >
            <v-icon>mdi-flag-plus-outline</v-icon>
          </v-btn>
        </template>
        
        <v-dialog
          v-model="dialog"
          max-width="800px"
        >
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                dark
                class="mb-2"
                @click="dialog=false"
                icon
              >
                <v-icon>mdi-close</v-icon>
              </v-btn>
            </v-card-title>
            
            <v-EditTask :info="editDic" @queryData="queryData" @deleteTask="deleteTask"></v-EditTask>
            
          </v-card>
        </v-dialog>

      </v-toolbar>
    </template>

    <template v-slot:item.status="{ item }">
      <!-- <v-simple-checkbox
        v-model="item.status"
      ></v-simple-checkbox> -->
      <v-btn text :color="item.status? 'green':'red'" dense small @click="setTaskStatus(item)">{{item.status? "已完成":"未完成"}}</v-btn>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
      <v-btn
        :href="item.link"
        target="_blank"
        text
      >
        <v-icon 
          small
          class="mr-2"
        >
          mdi-open-in-new
        </v-icon>
      </v-btn>
    </template>
    <template v-slot:no-data>
      <p><span>没有代办任务</span></p>
      <p v-if="bar.link">
        <span>可选择手工同步TS和JIRA任务:</span>
        <v-btn 
          color="blue darken-1"
          text
          @click="gotoTs"
        >去同步TS任务</v-btn>
        <v-btn 
          color="blue darken-1"
          text
          @click="gotoJira"
        >去同步JIRA任务</v-btn>
      </p>
    </template>
    <v-data-footer
      disable-items-per-page
    ></v-data-footer>
  </v-data-table>
</template>

<script>
import { defineComponent } from '@vue/composition-api'
import EditTask from './EditTask.vue'


export default defineComponent({
  setup() {
    
  },
  props: {
      bar: {
          type: Object,
          default: { class: 'blue', title: '任务汇总展示', link: false, display: false },
      },
      head: {
          type: Object,
          default: null
      },
      body: {
          type: Object,
          default: null
      }
    },
  components: {
    'v-EditTask': EditTask
  },
  data: () => ({
    hideFooter: true,
    dialog: false,
    dialogDelete: false,
    headers: [],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      name: '',
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0,
    },
    defaultItem: {
      name: '',
      calories: 0,
      fat: 0,
      carbs: 0,
      protein: 0,
    },
    editDic: {},
    init_editDic: {
      taskId: null,
      taskName: '',
      origin: 'person',
      content: '',
      creator: '',
      executor: [],
      followers: [],
      priority: '重要且紧急',
      status: false,
      link: 'http://127.0.0.1:8001/main/',
      attachment: null,
      startDate: '2021-02-13',
      endDate: '2021-02-18',
      startTime: '10:01',
      endTime: '20:50',
      result: 3,
      cycle: 7,
      tipType: 'ding',
      tipPath: ''
    }
  }),

  computed: {
    formTitle () {
      return this.editedIndex === -1 ? '新增任务' : '编辑任务'
    },
  },

  watch: {
    dialog (val) {
      val || this.close()
    },
    dialogDelete (val) {
      val || this.closeDelete()
    },
  },

  mounted () {
    this.initialize()
  },

  methods: {
    initialize () {
        this.headers = this.head
        this.queryData()
    },
    queryData(){
      console.log(this.bar)
      let get_data = {'params': this.bar.params}
      this.$api.task.queryTaskInfo(get_data).then(res=>{
          console.log('child table response ...')
          this.desserts = res.data.data
          console.log(this.desserts)
      })
    },
    setTaskStatus(unit){
      let get_data = {'taskId': unit.taskId, 'status': !unit.status}
      console.log(unit)
      this.$api.task.updateStatus(get_data).then(res=>{
        console.log(res)
      })
      this.queryData()
    },
    gotoTs(){
      this.$router.push({name: 'TsTask'})
    },
    gotoJira(){
      this.$router.push({name: 'JiraTask'})
    },
    newItem(node){
      console.log('new item .........')
      this.dialog = true
      console.log(node)
      this.editedIndex = -1
      this.editDic = this.init_editDic
      this.editDic.priority = node.priority
    },
    editItem (item) {
      console.log('editItem ....')
      console.log(item)
      this.editDic = item
      this.editedIndex = this.desserts.indexOf(item)
      console.log(this.editedIndex)
      this.dialog = true
    },
    deleteTask(){
      console.log('deleteTask set dialog false')
      this.dialog = false
    },
    deleteItem (item) {
      let res = confirm('确认删除个人任务？')
      if(res){
          this.actDeleteTask(item)
      }
    },
    actDeleteTask: function (item){
        let Index = this.desserts.indexOf(item)
        this.desserts.pop(Index)
        let get_data = {'taskId': item.taskId}
        this.$api.task.deleteTask(get_data).then(res=>{
            if(res.data.success===1){
                this.$emit('queryData')
                alert(res.data.message)
                this.$emit('deleteTask');
            }
        })
    },

    close () {
      this.dialog = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    closeDelete () {
      this.dialogDelete = false
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      })
    },

    save () {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem)
      } else {
        this.desserts.push(this.editedItem)
      }
      this.close()
    },
  },
})
</script>
